import React from 'react'
import { Button, PaginationProps, Table } from 'antd'
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';

interface ClTableProps {
  total?: number,
  showFasterJump?: boolean,
  showChangePage?: boolean,
  showTotal?: PaginationProps['showTotal'],
  dataSource?: Record<string, any>[],
  columns?: ColumnsType<any>
}

const ClTable: React.FC<ClTableProps> = (props) => {
  const { 
    total, 
    columns, 
    dataSource, 
    showTotal=true, 
    showFasterJump=true,
    showChangePage=true
  } = props;

  function getPaginationOptions() {
    let paginationOptions: TablePaginationConfig = {};
    
    // 设置总页数
    if (total) {
      paginationOptions.total = total;
    }

    // 是否展示快速跳转
    if (showFasterJump) {
      paginationOptions.showQuickJumper = {
        goButton: <Button type='primary' size='small' style={{marginLeft: '5px'}}>跳转</Button>
      }
    }

    // 是否展示总页数
    if (showTotal) {
      if (typeof showTotal == 'function') {
        paginationOptions.showTotal = showTotal;
      } else if (typeof showTotal == 'boolean') {
        paginationOptions.showTotal = showTotal ? (total) => `总计 ${total} 条` : showTotal;
      }
    }

    if (showChangePage) {
      paginationOptions.showSizeChanger = showChangePage;
    }

    return paginationOptions
  }

  return (
    <div>
      
      <Table 
      dataSource={dataSource}
      columns={columns}
      pagination={getPaginationOptions()}
      />
    </div>
  )
}

export default ClTable